import Vue from "vue";
import MapView from "@arcgis/core/views/MapView";
import TileLayer from "@arcgis/core/layers/TileLayer";
import Map from "@arcgis/core/Map";
import Ground from "@arcgis/core/Ground";
import ElevationLayer from "@arcgis/core/layers/ElevationLayer";
import Basemap from "@arcgis/core/Basemap";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import TileInfo from "@arcgis/core/layers/support/TileInfo";
import ScaleBar from "@arcgis/core/widgets/ScaleBar";
import Search from "@arcgis/core/widgets/Search";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import { registerUpdateLifecycle } from "echarts";
const state = {
  mapView: null, //二维地图视图
  webMap: null, //二维地图webmap
  //全部图层
  greenlandLayers: null,
  //点状绿地要素图层
  dianzldFeatureLayer: null,
  // 其他绿地要素图层
  qitaldFeatureLayer: null,
  // 道路绿地要素图层
  roadldFeatureLayer: null,
  // 古树名木要素图层
  gusmmFeatureLayer: null,
  // 社区要素图层
  shequFeatureLayer: null,
  // 行政区划图层
  xzqhFeatureLayer: null,
  //点状绿地要素图层视图
  dianzldFeatureLayerView: null,
  // 其他绿地要素图层视图
  qitaldFeatureLayerView: null,
  // 道路附属绿地要素图层视图
  roadldFeatureLayerView: null,
  // 古树名木要素图层视图
  gusmmFeatureLayerView: null,
  //影像底图
  tileVectorLayerBase: null,
  // 电子地图
  tileImagelayerBase: null,
  //   是否显示查询面板
  showQueryPanel: false,
  mapContainerWidth: "100%",
  // 空间查询参数
  spatialQueryParams: null,

  queryGeomery: null,
  highlightLayer: null, //高亮要素
  imageBaseMap: undefined,
  vectorBaseMap: undefined,
};
const getters = {
  //***************************************************************/
  dianzldFeatureLayer(state) {
    console.log("get dianzldFeatureLayer" + state.dianzldFeatureLayer);
    if (state.dianzldFeatureLayer == null)
      state.dianzldFeatureLayer = new FeatureLayer({
        title: window.mapConfig.operationLayers.mapservers["dianzld"].title,
        url: window.mapConfig.operationLayers.mapservers["dianzld"].url,
        id: window.mapConfig.operationLayers.mapservers["dianzld"].id,
        opacity: window.mapConfig.operationLayers.mapservers["dianzld"].opacity,
        popupEnabled:
          window.mapConfig.operationLayers.mapservers["dianzld"].popupEnabled,
        visible: window.mapConfig.operationLayers.mapservers["dianzld"].visible,
        minScale:
          window.mapConfig.operationLayers.mapservers["dianzld"].minScale,
        maxScale:
          window.mapConfig.operationLayers.mapservers["dianzld"].maxScale,
      });
    return state.dianzldFeatureLayer.clone();
  },
  qitaldFeatureLayer(state) {
    console.log("get qitaldFeatureLayer" + state.qitaldFeatureLayer);

    if (state.qitaldFeatureLayer == null)
      state.qitaldFeatureLayer = new FeatureLayer({
        title: window.mapConfig.operationLayers.mapservers["qitald"].title,
        url: window.mapConfig.operationLayers.mapservers["qitald"].url,
        id: window.mapConfig.operationLayers.mapservers["qitald"].id,
        opacity: window.mapConfig.operationLayers.mapservers["qitald"].opacity,
        popupEnabled:
          window.mapConfig.operationLayers.mapservers["qitald"].popupEnabled,
        visible: window.mapConfig.operationLayers.mapservers["qitald"].visible,
        minScale:
          window.mapConfig.operationLayers.mapservers["qitald"].minScale,
        maxScale:
          window.mapConfig.operationLayers.mapservers["qitald"].maxScale,
      });
    return state.qitaldFeatureLayer.clone();
  },
  roadldFeatureLayer(state) {
    console.log("get roadldFeatureLayer" + state.roadldFeatureLayer);

    if (state.roadldFeatureLayer == null)
      state.roadldFeatureLayer = new FeatureLayer({
        title: window.mapConfig.operationLayers.mapservers["roadld"].title,
        url: window.mapConfig.operationLayers.mapservers["roadld"].url,
        id: window.mapConfig.operationLayers.mapservers["roadld"].id,
        opacity: window.mapConfig.operationLayers.mapservers["roadld"].opacity,
        popupEnabled:
          window.mapConfig.operationLayers.mapservers["roadld"].popupEnabled,
        visible: window.mapConfig.operationLayers.mapservers["roadld"].visible,
        minScale:
          window.mapConfig.operationLayers.mapservers["roadld"].minScale,
        maxScale:
          window.mapConfig.operationLayers.mapservers["roadld"].maxScale,
      });
    return state.roadldFeatureLayer.clone();
  },
  gusmmFeatureLayer(state) {
    console.log("get gusmmFeatureLayer");

    if (state.gusmmFeatureLayer == null)
      state.gusmmFeatureLayer = new FeatureLayer({
        title: window.mapConfig.operationLayers.mapservers["gusmm"].title,
        url: window.mapConfig.operationLayers.mapservers["gusmm"].url,
        id: window.mapConfig.operationLayers.mapservers["gusmm"].id,
        opacity: window.mapConfig.operationLayers.mapservers["gusmm"].opacity,
        popupEnabled:
          window.mapConfig.operationLayers.mapservers["gusmm"].popupEnabled,
        visible: window.mapConfig.operationLayers.mapservers["gusmm"].visible,
      });
    return state.gusmmFeatureLayer.clone();
  },
  shequFeatureLayer(state) {
    console.log("get shequFeatureLayer");

    if (state.shequFeatureLayer == null)
      state.shequFeatureLayer = new FeatureLayer({
        title: window.mapConfig.operationLayers.mapservers["shequ"].title,
        url: window.mapConfig.operationLayers.mapservers["shequ"].url,
        id: window.mapConfig.operationLayers.mapservers["shequ"].id,
        opacity: window.mapConfig.operationLayers.mapservers["shequ"].opacity,
        popupEnabled:
          window.mapConfig.operationLayers.mapservers["shequ"].popupEnabled,
        visible: window.mapConfig.operationLayers.mapservers["shequ"].visible,
      });
    return state.shequFeatureLayer;
  },
  xzqhFeatureLayer(state) {
    console.log("get xzqhFeatureLayer");
    if (state.xzqhFeatureLayer == null)
      state.xzqhFeatureLayer = new FeatureLayer({
        url: window.mapConfig.xzqhLayer.url,
        id: window.mapConfig.xzqhLayer.id,
        // opacity: window.mapConfig.operationLayers.mapservers["shequ"].opacity,
        // popupEnabled:
        //   window.mapConfig.operationLayers.mapservers["shequ"].popupEnabled,
        // visible: window.mapConfig.operationLayers.mapservers["shequ"].visible,
        symbol: window.mapConfig.xzqhLayer.symbol,
      });
    return state.xzqhFeatureLayer;
  },
};
const mutations = {
  // 切换底图
  basemapChange(state, paramObj) {
    let oldmap = paramObj.oldmap;
    let newmap = paramObj.newmap;
    //剔除老底图
    switch (oldmap) {
      case "tileVector":
        state.mapView.map.remove(state.tileVectorLayerBase);
        break;
      case "tileImage":
        state.mapView.map.remove(state.tileImagelayerBase);
        break;
    }
    //切换新底图
    switch (newmap) {
      case "tileImage":
        state.mapView.map.add(state.tileImagelayerBase, 0);
        break;
      case "tileVector":
        if (state.tileVectorLayerBase) {
          state.mapView.map.add(state.tileVectorLayerBase, 0);
        } else {
          //   state.tileVectorLayerBase = new TileLayer({
          //     title: "矢量电子地图",
          //     url: window.mapConfig.TileLayer.tileVectorLayer,
          //   });
          state.tileVectorLayerBase = new WebTileLayer({
            title: "天地图影像",
            urlTemplate: window.mapConfig.tdtLayer.vec_c,
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
            spatialReference: {
              wkid: 4490,
            },
            fullExtent: {
              xmin: -180,
              ymin: -90,
              xmax: 180,
              ymax: 90,
              spatialReference: 4490,
            },
          });
          state.mapView.map.add(state.tileVectorLayerBase, 0);
        }
        break;
    }
  },

  loadMap(state, paramObj) {
    console.log("loadMap");
    state.webMap = new Map({
      // basemap: "topo"
    });
    // 添加底图图层
    // state.tileImagelayerBase = new WebTileLayer({
    //   title: "天地图影像",
    //   urlTemplate: window.mapConfig.tdtLayer.img_c,
    //   subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    //   tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
    //   spatialReference: {
    //     wkid: 4490,
    //   },
    //   fullExtent: {
    //     xmin: -180,
    //     ymin: -90,
    //     xmax: 180,
    //     ymax: 90,
    //     spatialReference: 4490,
    //   },
    // });
    state.tileImagelayerBase = new TileLayer({
      title: "影像地图",
      url: window.mapConfig.baseMapLayers.imageLayer,
    });
    // show	该图层在内容列表中可见。
    // hide	图层隐藏在内容列表中。
    // hide-children 如果图层是 GroupLayer， BuildingSceneLayer， KMLLayer， MapImageLayer, TileLayer 或 WMSLayer，请从内容列表中隐藏子图层。
    state.tileImagelayerBase.listMode = "hide-children";
    state.webMap.addMany([state.tileImagelayerBase]);
    state.highlightLayer = new GraphicsLayer({
      title: "高亮图层",
    });
    state.highlightLayer.listMode = "hide";
    state.webMap.add(state.highlightLayer, 100);
    // 添加业务图层
    // AddOperationLayers();
    state.dianzldFeatureLayer = new FeatureLayer({
      title: window.mapConfig.operationLayers.mapservers["dianzld"].title,
      url: window.mapConfig.operationLayers.mapservers["dianzld"].url,
      id: window.mapConfig.operationLayers.mapservers["dianzld"].id,
      opacity: window.mapConfig.operationLayers.mapservers["dianzld"].opacity,
      popupEnabled:
        window.mapConfig.operationLayers.mapservers["dianzld"].popupEnabled,
      visible: window.mapConfig.operationLayers.mapservers["dianzld"].visible,
    });
    state.qitaldFeatureLayer = new FeatureLayer({
      title: window.mapConfig.operationLayers.mapservers["mianzld"].title,
      url: window.mapConfig.operationLayers.mapservers["mianzld"].url,
      id: window.mapConfig.operationLayers.mapservers["mianzld"].id,
      opacity: window.mapConfig.operationLayers.mapservers["mianzld"].opacity,
      popupEnabled:
        window.mapConfig.operationLayers.mapservers["mianzld"].popupEnabled,
      visible: window.mapConfig.operationLayers.mapservers["mianzld"].visible,
    });
    state.gusmmFeatureLayer = new FeatureLayer({
      title: window.mapConfig.operationLayers.mapservers["gusmm"].title,
      url: window.mapConfig.operationLayers.mapservers["gusmm"].url,
      id: window.mapConfig.operationLayers.mapservers["gusmm"].id,
      opacity: window.mapConfig.operationLayers.mapservers["gusmm"].opacity,
      popupEnabled:
        window.mapConfig.operationLayers.mapservers["gusmm"].popupEnabled,
      visible: window.mapConfig.operationLayers.mapservers["gusmm"].visible,
    });

    state.mapView = new MapView({
      container: "mapViewDiv",
      map: state.webMap,
      center: window.mapConfig.mapcenter4490,
      zoom: window.mapConfig.zoom4490,
      popup: {
        autoOpenEnabled: true,
        defaultPopupTemplateEnabled: true,
      },
    });

    state.mapView.whenLayerView(state.dianzldFeatureLayer).then((layerView) => {
      state.dianzldFeatureLayerView = layerView;
    });
    state.mapView.whenLayerView(state.qitaldFeatureLayer).then((layerView) => {
      state.qitaldFeatureLayerView = layerView;
    });
    state.mapView.whenLayerView(state.gusmmFeatureLayer).then((layerView) => {
      state.gusmmFeatureLayerView = layerView;
    });

    // //   添加业务图层
    // state.webMap.addMany([
    //   state.qitaldFeatureLayer,
    //   state.dianzldFeatureLayer,
    //   state.gusmmFeatureLayer,
    // ]);
    state.mapView.ui.add(paramObj.mapToolBarId, "top-right");

    state.mapView.ui.add(paramObj.baseMapTabId, "bottom-right");
    if (paramObj.mapEditorToolsId != null)
      state.mapView.ui.add(paramObj.mapEditorToolsId, "top-right");
    //加载比例尺微件
    const scaleBar = new ScaleBar({
      view: state.mapView,
      unit: "metric",
    });

    state.mapView.ui.add(scaleBar, "bottom-left");
    //删除默认版权文本属性
    state.mapView.ui.remove("attribution");
    state.mapView.ui.remove("zoom");
    // state.mapView
    //   .whenLayerView(state.peopleLayer)
    //   .then(function (layerview) {
    //     state.originRender = state.peopleLayer.renderer;
    //   });
    const searchWidget = new Search({
      view: state.mapView,
      allPlaceholder: "请输入名称或标识码",
      includeDefaultSources: false,
      locationEnabled: false,
      sources: [
        {
          layer: state.dianzldFeatureLayer,
          searchFields: ["objcode", "objname"],
          displayField: "objname",
          exactMatch: false,
          outFields: ["*"],
          name: "点状绿地",
          placeholder: "请输入",
        },
        {
          layer: state.qitaldFeatureLayer,
          searchFields: ["objcode", "objname"],
          displayField: "objname",
          exactMatch: false,
          outFields: ["*"],
          name: "其他绿地",
          placeholder: "请输入",
        },
        {
          layer: state.roadldFeatureLayer,
          searchFields: ["objcode", "objname", "yhmcname"],
          displayField: "objname",
          exactMatch: false,
          outFields: ["*"],
          name: "道路附属绿地",
          placeholder: "请输入",
        },
        {
          layer: state.gusmmFeatureLayer,
          searchFields: ["objcode", "objname"],
          displayField: "objname",
          exactMatch: false,
          outFields: ["*"],
          name: "古树名木",
          placeholder: "请输入",
        },
      ],
    });
    state.mapView.ui.add(searchWidget, "top-left");
  },
};

const actions = {
  addAsync(context) {
    context.commit("loadBaseMap");
  },
};

// 添加业务图层
//   读取图层配置信息
/**
 * 类型枚举
 * 切片服务：tile
 * 动态服务：map-image
 * 场景服务：scene
 * bim服务：building-scene
 * 要素服务：feature
 * DEM服务：demserver
 * 倾斜服务：
 */
//   shequ: {
//   id: "shequlayer",
//   title: "社区",
//   url: "http://nowell.mypc.com/server/rest/services/midong/green_land/MapServer/3",
//   type: "map-image",
// popupEnabled:false
//   visible: true,
//   order: 4,
// },
function AddOperationLayers() {
  // mapserver
  Object.keys(window.mapConfig.operationLayers.mapservers).map((layerKey) => {
    let tempLayer;
    const layerItem = window.mapConfig.operationLayers.mapservers[layerKey];
    tempLayer = new MapImageLayer({
      url: layerItem.url,
      id: layerItem.id,
      opacity: layerItem.opacity,
      popupEnabled: layerItem.popupEnabled,
      visible: layerItem.visible,
      //   sublayers: [
      //     {
      //       id: layerItem.sublayerId,
      //       definitionExpression: "1 = 1",
      //     },
      //   ],
    });

    state.webMap.add(tempLayer); //, layerItem.order);
  });
  // 要素图层
  Object.keys(window.mapConfig.operationLayers.featurelayers).map(
    (layerKey) => {
      let tempLayer;
      const layerItem =
        window.mapConfig.operationLayers.featurelayers[layerKey];
      switch (layerItem.type) {
        case "map-image":
          tempLayer = new MapImageLayer({
            url: layerItem.url,
            id: layerItem.id,
            opacity: layerItem.opacity,
            popupEnabled: layerItem.popupEnabled,
            visible: layerItem.visible,
            sublayers: [
              {
                id: layerItem.sublayerId,
                definitionExpression: "1 = 1",
              },
            ],
          });

          break;
        case "feature":
          tempLayer = new FeatureLayer({
            url: layerItem.url,
            id: layerItem.id,
            //   opacity: 0.6,
            //   popupEnabled: layerItem.popupEnabled,
            // Popup.defaultPopupTemplateEnabled
            opacity: layerItem.opacity,
            visible: layerItem.visible,
          });
          break;
        default:
          break;
      }
      state.webMap.add(tempLayer); //, layerItem.order);
    }
  );
}
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};
